/**
 * @copyright   2010-2017, The Titon Project
 * @license     http://opensource.org/licenses/BSD-3-Clause
 * @link        http://titon.io
 */

@include export("modal") {
    $titon-modal-class-outer: generate-class-name($titon-modal, "outer");
    $titon-modal-animations: map-get($titon-modal, "animations");

    #{generate-class-name($titon-modal)} {
        @extend %placeholder-full-screen;
        position: fixed;
        opacity: 0;
        visibility: hidden;
        overflow: auto;
        z-index: map-get($titon-settings-zindex, "modal");
        transition: opacity map-get($titon-modal, "transition"), visibility map-get($titon-modal, "transition");
        will-change: transform;
        -webkit-overflow-scrolling: touch;

        &.is-loading {
            #{generate-class-name($titon-modal, "close")} {
                display: none;
            }
        }

        &.is-expanded {
            @extend %placeholder-show;
        }

        &.is-fullscreen #{$titon-modal-class-outer} {
            @extend %placeholder-full-screen;
            margin: 0;
            max-width: 100%;
            border-radius: 0;
            transform: translate(0, 0);
        }
    }

    #{generate-class-name($titon-modal, "close")} {
        position: absolute;
        background: none;
        border: 0;
        top: theme-setting("medium-padding");
        #{bidi-opposite-alignment()}: theme-setting("medium-padding");
        line-height: 1;
        opacity: theme-setting("opacity");
        padding: theme-setting("small-padding");

        &:hover {
            opacity: 1;
        }
    }

    #{$titon-modal-class-outer} {
        position: relative;
        margin: theme-setting("margin");
        transition: transform map-get($titon-modal, "transition");
    }

    #{generate-class-name($titon-modal, "inner")} {
        position: relative;
    }

    #{generate-class-name($titon-modal, "head")},
    #{generate-class-name($titon-modal, "body")},
    #{generate-class-name($titon-modal, "foot")} {
        padding: theme-setting("medium-padding");
    }

    //-------------------- Animations --------------------//

    #{generate-class-name($titon-modal)} {
        @if (is-feature-enabled("all-animations") or index($titon-modal-animations, "from-above")) {
            &.from-above {
                #{$titon-modal-class-outer} {
                    transform: scale(1.3);
                }

                &.show #{$titon-modal-class-outer} {
                    transform: scale(1);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-modal-animations, "from-below")) {
            &.from-below {
                #{$titon-modal-class-outer} {
                    transform: scale(0.7);
                }

                &.show #{$titon-modal-class-outer} {
                    transform: scale(1);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-modal-animations, "slide-in-top")) {
            &.slide-in-top {
                #{$titon-modal-class-outer} {
                    transform: translateY(-50%);
                }

                &.show #{$titon-modal-class-outer} {
                    transform: translateY(0);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-modal-animations, "slide-in-bottom")) {
            &.slide-in-bottom {
                #{$titon-modal-class-outer} {
                    transform: translateY(50%);
                }

                &.show #{$titon-modal-class-outer} {
                    transform: translateY(0);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-modal-animations, "slide-in-left")) {
            &.slide-in-left {
                #{$titon-modal-class-outer} {
                    transform: translateX(-25%);
                }

                &.show #{$titon-modal-class-outer} {
                    transform: translateX(0);
                }
            }
        }

        @if (is-feature-enabled("all-animations") or index($titon-modal-animations, "slide-in-right")) {
            &.slide-in-right {
                #{$titon-modal-class-outer} {
                    transform: translateX(25%);
                }

                &.show #{$titon-modal-class-outer} {
                    transform: translateX(0);
                }
            }
        }
    }
}
